<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>纽约-140万点</title>
  <script include="jquery" src="./static/libs/include-lib-local.js"></script>
  <script include="language,echarts" src="./static/libs/include-mapboxgl-local.js"></script>
  <link href="./static/demo/mapboxgl/example/style.css" rel="stylesheet" type="text/css" />
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id="map">
    <div id="mouse-position">
    </div>
  </div>
  <script>
    //一定要去mapbox注册一个key,这个key会失效的
    mapboxgl.accessToken =
      'pk.eyJ1IjoicGFybmRlZWRsaXQiLCJhIjoiY2o1MjBtYTRuMDhpaTMzbXhpdjd3YzhjdCJ9.sCoubaHF9-nhGTA-sgz0sA';
    var map = new mapboxgl.Map({
      container: 'map', // 绑定div
      style: 'mapbox://styles/mapbox/dark-v9', // 使用MapBox官方的样式
      center: [-74.04327099998152, 40.86737600240287],
      zoom: 9
    });
    map.addControl(new MapboxLanguage(), 'top-right'); //中文支持
    //注册鼠标移动事件
    map.on('mousemove', function (e) {
      //经纬度坐标转web墨卡托
      const earthRad = 6378137.0;
      const x = e.lngLat.lng * Math.PI / 180 * earthRad;
      const a = e.lngLat.lat * Math.PI / 180;
      const y = earthRad / 2 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)));
      document.getElementById('mouse-position').innerHTML = "X轴：" + x.toFixed(2) + "，Y轴：" + y.toFixed(2);
    });
    updateView();

    var layer;

    var CHUNK_COUNT = 19;

    function fetchData(idx) {
      if (idx >= CHUNK_COUNT) {
        return;
      }
      var dataURL = `../../static/data/echarts/point/data_${idx}.bin`;
      var xhr = new XMLHttpRequest();
      xhr.open('GET', dataURL, true);
      xhr.responseType = 'arraybuffer';

      xhr.onload = function (e) {
        var rawData = new Float32Array(this.response);

        layer.chart
          .appendData({
            seriesIndex: 0,
            data: rawData
          });

        fetchData(idx + 1);
      };

      xhr.send();
    }

    function updateView() {
      var option = {
        title: {
          top: '10px',
          text: "140万纽约出租车",
          subtext: "数据来自纽约出租车以及Uber",
          left: 'center',
          textStyle: {
            color: '#fff'
          },
          subtextStyle: {
            color: '#fff'
          }
        },
        mapboxgl: {
          roam: true
        },
        series: [{
          type: 'scatterGL',
          progressive: 3000,
          coordinateSystem: 'mapboxgl',
          symbolSize: 0.5,
          blendMode: 'lighter',
          large: true,
          itemStyle: {
            color: '#FF3300',
          },
          postEffect: {
            enable: true
          },
          silent: true,
          dimensions: ['lng', 'lat'],
          data: new Float32Array()
        }]
      };
      layer = new mapboxgl.zondy.EchartsLayer(map, option).addTo(map);

      fetchData(0);
    }
  </script>


</body>

</html>